<template>
	<view>
		<!-- 未加入社团的提示信息 -->
		<view v-if="userinfo.society_id === '0'"><NoSociety /></view>
		<view v-else>
			<wyb-drop-down
				active-color="#40ffaf"
				default-color="#ffffff"
				:options="dropDownOptions"
				:bgColor="{ header: '#000000', content: '#000000' }"
				@select="changeOrder"
				@hide="changeOrderBy"
			></wyb-drop-down>
			<Acard class="fs-center mt-50" pad="10px" @click.native="createMyTalk">
				<view class="flex flex-nowrap flex-wrap flex-justify-center">
					发布自己的话题
					<u-icon name="arrow-right" color="#fff"></u-icon>
				</view>
			</Acard>
			<!-- 讨论列表 -->
			<view class="margin-15">
				<Acard
					v-for="talk in talks"
					:key="talk.id"
					pad="12px"
					bgFilter
					@click.native="toTalkDetail(talk)"
					class="mb-10"
				>
					<view class="talk-list">
						<!-- 标题 点赞数 评论数 时间 -->
						<view>
							<view class="mb-30">{{ talk.title }}</view>
							<view class="flex talk-list-icon">
								<u--text
									prefixIcon="thumb-up"
									iconStyle="font-size: 18px;color:#fff"
									color="#fff"
									:text="talk.likes"
									class="mr-10"
								></u--text>
								<u--text
									prefixIcon="eye"
									iconStyle="font-size: 18px;color:#fff"
									color="#fff"
									:text="talk.views"
								></u--text>
							</view>
						</view>
						<!-- 图片位置 -->
						<view v-if="talk.img">
							<u--image :src="talk.img" width="80px" height="80px"></u--image>
						</view>
					</view>
				</Acard>
				<!-- 分页器 -->
				<page-pagination
					:total="total"
					:pageSize="limit"
					:currentPage="pageNo"
					color="#40ffaf"
					mode="simple"
					@change="changePageNo"
					btnText
				></page-pagination>
			</view>
		</view>
		<ParticleBackground></ParticleBackground>
		<view style="height: 60px"></view>
		<Tabbar bgColor="#000"></Tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'Talk',
	data() {
		return {
			dropDownOptions: [
				{
					header: '默认排序',
					contents: ['默认排序', '时间顺序', '时间倒序']
				}
			],
			orderBy: '默认排序',
			pageNo: 1,
			limit: 5
		};
	},
	computed: {
		...mapState('user', ['userinfo']),
		...mapState('talk', ['talks','total'])
	},
	mounted() {
		this.getTalks();
	},
	methods: {
		createMyTalk() {
			uni.navigateTo({
				url: `/pages/talk/TalkCreate/TalkCreate?user_id=${this.userinfo.id}`
			});
		},
		// 查看讨论详情
		toTalkDetail(talk) {
			this.$store.commit('talk/SET_SETUSERSELECTTALK', talk);
			uni.navigateTo({
				url: '/pages/talk/Detail/Detail'
			});
		},
		// 改变排序规则
		changeOrder({ content }) {
			this.dropDownOptions[0].header = content;
		},
		// 下拉菜单隐藏时修改orderby
		changeOrderBy() {
			this.orderBy = this.dropDownOptions[0].header;
		},
		getTalks() {
			let { pageNo, limit, orderBy } = this;
			this.$store.dispatch('talk/getTalks', { pageNo, limit, orderBy, society_id: this.userinfo.society_id });
		},
		// 分页器页数改变
		changePageNo(curPage){
			this.pageNo = curPage;
		}
	},
	watch:{
		pageNo(){
			this.getTalks();
		},
		orderBy(){
			this.getTalks();
		}
	}
};
</script>

<style scoped lang="scss">
.talk-list {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	position: relative;

	&-icon {
		position: absolute;
		bottom: 1px;
	}
}
</style>
